<template>
    <div style="background: #ececec; padding: 15px">
    <a-card title="历史审核记录" :bordered="false">
        <h3>axios取消请求</h3>
    <div>
        <br />
        <p>tips：将浏览器network设置成低速3G，点击发送请求后再点击取消请求即可查看效果</p>
        <br />
        <a-space>
            <a-button key="back" @click="abortNetwork">取消请求</a-button>
            <a-button key="submit" type="primary" :loading="sendLoading" @click="sendNetwork">发送请求</a-button>
        </a-space>
    </div>
    </a-card>
    </div>
</template>
  
<script setup lang="ts">
import { axiosAbortNetwork } from '@/api/other'
import { message } from 'ant-design-vue';
import { ref } from 'vue';

// 按钮loading
const sendLoading = ref(false)

// 创建请求配置
const abortNetworkConfig: { [attr: string]: any } = {
    controller: undefined
}

// 发送请求
const sendNetwork = () => {
    sendLoading.value = true
    axiosAbortNetwork({}, abortNetworkConfig)
        .then(res => { })
        .catch(err => {
            if (err.code === 'ERR_CANCELED') {
                message.warn('已经取消网络请求！')
            }
        })
        .finally(() => {
            sendLoading.value = false
        })
}

// 取消请求
const abortNetwork = () => {
    abortNetworkConfig.controller && abortNetworkConfig.controller.abort()
}
</script>
  
  
<style scoped></style>
  